<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/css.css">
  <link rel="stylesheet" href="css/kuding.css">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>
<div class="AllDiv">
  <!---顶部菜单栏（固定位置和高度：100px）--->
  <div class="TopNavigation">
    <div id="toplogo">XianCai</div>
  </div>

  <!---内容区外壳（自适应铺满高度）--->
  <div class="BodyContentSurface">
    <!---内容区--->
    <div class="BodyContent">
      <!---左侧导航栏（固定位置和宽度：200px）--->
      <div class="LeftNavigationSurface">
        <div class="left1">
          <!--          LeftNavigationSurface-->
          <a href="index.html"><div class="left-bq">首页</div></a>
        </div>
        <div class="left">
          <!--          LeftNavigationSurface-->
          <a href="index2.html"><div class="left-bq">消息</div></a>
        </div>
        <div class="left">
          <!--          LeftNavigationSurface-->
          <a href="index3.html"><div class="left-bq">个人</div></a>
        </div>

      </div>
      <!---右侧内容区（自适应铺满宽度）--->
      <div class="RightContentSurface">

        <div class="container">

          <div class="profile-header">
            <div class="avatar">
              <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.WXtLvr1iXhwS6T1mtv9TDgHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3" alt="用户头像">
            </div>
            <div class="user-info">
              <h2>二手达人</h2>
              <p>ID: 88888888</p >
            </div>
          </div>

          <!-- 选项卡导航 -->
          <div class="tabs">
            <div class="tab active" data-tab="profile">个人主页</div>
            <div class="tab" data-tab="orders">我的订单</div>
            <div class="tab" data-tab="sell">我要出售</div>
            <div class="tab" data-tab="collect">我的收藏</div>
            <div class="tab" data-tab="settings">设置</div>
          </div>

          <!-- 选项卡内容 -->
          <div class="tab-content">
            <!-- 个人主页 -->
            <div class="content active" id="profile">
              <div class="item">
                <p><strong>昵称：</strong>二手达人</p >
                <p><strong>简介：</strong>专注于高性价比的二手电子产品交易。</p >
              </div>
            </div>

            <!-- 我的订单 -->
            <div class="content" id="orders">
              <div class="item">
                <p><strong>订单号：</strong>2023052012345</p >
                <p><strong>商品：</strong>Apple iPhone 13</p >
                <p><strong>状态：</strong>已完成</p >
              </div>
              <div class="item">
                <p><strong>订单号：</strong>2023061898765</p >
                <p><strong>商品：</strong>AirPods Pro</p >
                <p><strong>状态：</strong>待收货</p >
              </div>
            </div>

            <!-- 我要出售 -->
            <div class="content" id="sell">
              <div class="item">
                <p>欢迎发布您的闲置电子产品！</p >
                <p><button style="margin-top:10px;">发布新商品</button></p >
              </div>

              <!-- 已上架商品展示 -->
              <h3>已上架商品</h3>
              <div class="product-list">
                <div class="product-item">
                  <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.axNFCGBRxbgIMjI0YtGLMQHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3" alt="iPhone 13">
                  <div class="product-info">
                    <p class="product-title">iPhone 13 128G 蓝色</p >
                    <p class="product-price">¥4,299</p >
                    <p class="product-status">在售</p >
                  </div>
                </div>
                <div class="product-item">
                  <img src="https://2c.zol-img.com.cn/product/222_800x600/518/ceK0Leg1T3No.jpg" alt="MacBook Pro">
                  <div class="product-info">
                    <p class="product-title">MacBook Pro 13寸 M1</p >
                    <p class="product-price">¥7,500</p >
                    <p class="product-status">已售</p >
                  </div>
                </div>
                <div class="product-item">
                  <img src="https://zhongces3.sina.com.cn/product/20220910/165ea605ad52f3b3c3011c6bab001718.jpeg" alt="AirPods">
                  <div class="product-info">
                    <p class="product-title">AirPods Pro 二代</p >
                    <p class="product-price">¥1,399</p >
                    <p class="product-status">在售</p >
                  </div>
                </div>
              </div>
            </div>


            <div class="content" id="collect">
              <div class="item">
                <p><strong>收藏商品：</strong>Sony WH-1000XM4</p >
              </div>
              <div class="item">
                <p><strong>收藏商品：</strong>Nintendo Switch</p >
              </div>
            </div>


            <div class="content" id="settings">
              <div class="item">
                <p><strong>账户安全</strong></p >
                <p><strong>消息通知</strong></p >
                <p><strong>关于我们</strong></p >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

</html>
<script src="js/gr.js"></script>
